* {
    box-sizing: border-box;
    font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
}

/* Input (EditText) */
.mdInput { 
    position: relative; 
    margin: 1.5em 0.5em 1em; 
}
.mdInput > input {
    display: block;
    width: 100%;
    padding: 0.6em 0.6em 0.6em 0.3em;
    border: none;
    border-bottom: 1px solid #757575;
    background: transparent;
    font-size: 1em;
}
.mdInput > input:focus {
    outline: none;
}

.mdInput > label {
    color: #9E9E9E;
    font-size: 1em;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 0.3em;
    top: 0.6em;
    transition: 0.2s ease all;
}
.mdInput > input:focus ~ label, .mdInput > input:valid ~ label        {
    top: -1em;
    font-size: 0.75em;
    color: #212121;
}
.mdInputDate > label {
    top: -1em;
    font-size: 0.9em;
}
.mdInputBar {
    position: relative;
    display: block;
    width: 100%;
}
.mdInputBar:before, .mdInputBar:after {
    content: '';
    height: 0.15em;
    width: 0;
    bottom: 0.01em;
    position: absolute;
    background: #212121;
    transition: 0.2s ease all;
}
.mdInputBar:before {
    left: 50%;
}
.mdInputBar:after {
    right: 50%;
}
.mdInput > input:focus ~ .mdInputBar:before, .mdInput > input:focus ~ .mdInputBar:after {
    width: 50%;
}
.mdInput > i.matIcon {
    position: absolute;
    top: 0.35em;
    right: 0;
}
.mdInput > i.matIcon > span.tooltip {
    z-index: 1;
    position: absolute;
    left: 105%;
    border-radius: 0.125em;
    padding: 0.2em;
    background: #E0E0E0;
    font-size: 0.75em;
    opacity: 0;
    transition: 0.2s ease opacity;
}
.mdInput > i.matIcon:hover > span.tooltip {
    opacity: 1;
}


/* Input (DropdownButton) */
.mdDropdownButton {
    position: relative;
    font-size: 1em;
}

/* Select */
.mdSelect > select {
    -moz-appearance: none;
    -webkit-appearance: none;
    padding: 0.6em 0.6em 0.6em 0.3em;
    background-color: transparent;
    width: 100%;
    font-size: 1em;
    color: #9E9E9E;
    border: none;
    border-bottom: 1px solid #757575;
}
.mdSelect > select:focus, .mdSelect > select:valid {
    color: rgba(0, 0, 0, 0.87);
}
.mdSelect > select:focus {
    outline: none;
}

.mdSelect {
    position: relative;
    margin: 1.5em 0.5em 1em;
}
.mdSelect:after {
    position: absolute;
    top: 1em;
    right: 0.5em;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: .25em solid transparent;
    border-right: .25em solid transparent;
    border-top: .375em solid rgba(0, 0, 0, 0.12);
    pointer-events: none;
}
.mdSelectBirthday {
    float: left;
}

/* Button */
.mdInput[type=submit] {
    min-width: 5.5em;
    height: 2.25em;
    border-radius: 0.125em;
    border-width: 0em;
    padding: 0em 1em;

    background: #E0E0E0;
	color: #212121;
	color: rgba(0, 0, 0, 0.87);
    font-size: 0.875em;
}
.mdInput[type=submit]:enabled:hover {
    box-shadow: 0em 0.1875em 0.375em rgba(0, 0, 0, 0.16);
}
.mdInput[type=submit]:enabled:focus {
    background: #d5d5d5;
    outline: none;
}
.mdInput[type=submit]:enabled:active {
    background: #d6d6d6;
    box-shadow: 0em 0.1875em 1.5em rgba(0, 0, 0, 0.45);
}
.mdInput[type=submit]:disabled {
    background: #dfdfdf;
    color: rgba(0, 0, 0, 0.26);
}
.mdInput[type=submit].center {
    display: block;
    margin: 1.5em auto 1em;
}

ul.mdList {
    padding-top: 0.5em;
    list-style: none;
}
ul.mdList > li {
    padding: 1em;
    height: 5.5em;
}
ul.mdList > li:nth-child(odd) {
    background: #CFD8DC;
}
ul.mdList > li:nth-child(even) {
    background: rgba(0, 0, 0, 0);
}
ul.mdList > li > div:first-child {
    overflow: hidden;
    white-space: nowrap;
    font-size: 1em;
    color: rgba(0, 0, 0, 0.87);
}
ul.mdList > li > div:nth-child(2) {
    padding-top: 0.25em;
    height: 2.75em;
    overflow: hidden;
    font-size: 0.875em;
    color: rgba(0, 0, 0, 0.54);
}

/* Radio button */
input.mdInput[type=radio] {
    display: none;
}
input.mdInput[type=radio] + label {
    position: relative;
    display: block;
    margin-left: 1.5em;
    line-height: 1.5em;
}
input.mdInput[type=radio] + label:before {
    content: '';
    position: absolute;
    left: -24px;
    width: 16px;
    height: 16px;
    border-style: solid;
    border-radius: 50%;
    border-width: 2px;
    border-color: rgba(0, 0, 0, 0);
    transition: border-color 0.2s ease;
}
input.mdInput[type=radio]:checked + label:before {
    border-color: #9E9E9E;
}
input.mdInput[type=radio] + label:after {
    content: '';
    position: absolute;
    top: 0;
    left: -24px;
    border-style: solid;
    border-width: 2px;
    border-radius: 50%;
    border-color: rgba(0, 0, 0, 0.54);
    width: 16px;
    height: 16px;
    transition: top 0.2s linear,
        left 0.2s linear,
        border-width 0.2s linear,
        border-color 0.2s linear,
        width 0.2s linear,
        height 0.2s linear;
}
input.mdInput[type=radio]:checked + label:after {
    content: '';
    top: 5px;
    left: -19px;
    width: 0;
    height: 0;
    border-width: 5px;
    border-color: #9E9E9E;
}

/* Checkbox */
input.mdInput[type=checkbox] {
    display: none;
}
input.mdInput[type=checkbox] + label {
    position: relative;
    display: block;
    margin-left: 1.5em;
    line-height: 1.5em;
}
input.mdInput[type=checkbox] + label:before {
    content: '';
    position: absolute;
    top: 2px;
    left: -24px;
    border-style: solid;
    border-width: 1.8px;
    border-color: rgba(0, 0, 0, 0.54);
    border-radius: 2px;
    width: 16px;
    height: 16px;
    transition: width 0.2s linear,
        height 0.2s linear,
        border-width 0.2s linear,
        background-color 0.2s linear;
}
input.mdInput[type=checkbox]:checked + label:before {
    border-width: 0px;
    width: 19.6px;
    height: 19.6px;
    background-color: #9E9E9E;
}
input.mdInput[type=checkbox] + label:after {
    content: '';
    position: absolute;
    top: 5.5px;
    left: -21px;
    border-style: none none solid solid;
    border-width: 0px;
    border-color: rgba(255, 255, 255, 0);
    border-bottom-left-radius: 2px;
    width: 11.56px;
    height: 6.22px;
    transform: rotate(-45deg);
    transition: border-width 0.2s;
}
input.mdInput[type=checkbox]:checked + label:after {
    border-width: 3px;
    border-color: #FFFFFF;
}